<template>
	<el-dialog v-model="showflag" :title="title" width="30vw" align-center :close-on-click-modal="false"
		@close="resetdata">
		<div style="padding: 0 40px">
			<el-form ref="ruleFormRef" style="width: 100%" :model="ruleForm" :rules="rules" label-width="auto"
				class="demo-ruleForm" :size="formSize" status-icon>
				<el-form-item label="昵称" prop="name">
					<el-input v-model="ruleForm.name" :disabled="!isedit" placeholder="请输入昵称" />
				</el-form-item>
				<el-form-item label="登录名" prop="name">
					<el-input v-model="ruleForm.name" :disabled="!isedit" placeholder="请输入登录名" />
				</el-form-item>
				<el-form-item label="密码" prop="name">
					<el-input v-model="ruleForm.name" :disabled="!isedit" placeholder="请输入密码" />
				</el-form-item>
				<el-form-item label="状态" prop="phone">
					<el-radio-group v-model="ruleForm.status" class="ml-4">
						<el-radio :value="1" size="large">启用</el-radio>
						<el-radio :value="2" size="large">禁用</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
		</div>
		<template #footer>
			<div class="dialog-footer">
				<el-button @click="showflag = false">取消</el-button>
				<el-button v-if="isedit" type="primary" @click="submitForm(ruleFormRef)">
					确定
				</el-button>
			</div>
		</template>
	</el-dialog>
</template>

<script setup>
	import {
		onMounted,
		ref,
		provide,
		reactive,
		toRaw,
		inject
	} from 'vue';
	import {
		ElMessage
	} from 'element-plus';
	import {
		post,
		baseURL
	} from '@/utils/axios';

	let showflag = ref(false);
	let title = ref('新增账号');
	let isedit = ref(true);
	let device_id = ref('');
	let token = ref('');
	const getdata = inject('getdata'); // 父组件的方法

	onMounted(() => {
		token.value = localStorage.getItem('token') || '';
	});

	// 表单相关---------------------------------------
	const formSize = ref('default');
	const ruleFormRef = ref(null);
	let ruleForm = reactive({
		id: '',
		name: '',
		phone: '',
		status:1
	});

	const rules = reactive({
		name: [{
			required: true,
			message: '请填写姓名',
			trigger: 'blur'
		}],
		phone: [{
			required: true,
			message: '请填写手机号',
			trigger: 'blur'
		}],
	});

	const submitForm = async (formEl) => {
		if (!formEl) return;
		await formEl.validate((valid, fields) => {
			if (valid) {
				post({
					url: ruleForm.id ? '/api/rygl/edit' : '/api/rygl/add',
					data: toRaw(ruleForm),
				}).then((res) => {
					ElMessage.success('操作成功!');
					getdata();
					showflag.value = false;
					resetdata();
				});
			} else {
				console.log('error submit!');
			}
		});
	};
	// 表单END---------------------------------------

	const resetdata = () => {
		Object.assign(ruleForm, {
			id: '',
			name: '',
			phone: '',
		});
		isedit.value = true;
		title.value = '新增账号';
	};
	// 通过 defineExpose 暴露给父组件
	defineExpose({
		showflag,
		title,
		isedit,
		device_id,
		ruleForm,
	});
</script>

<style lang="scss" scoped>
	::v-deep .el-form-item {
		margin-bottom: 30px;
		width: 100%;
	}

	.linebox {
		display: flex;
		align-items: flex-start;
		width: 100%;
	}

	::v-deep .avatar-uploader .avatar {
		width: 178px;
		height: 178px;
		display: block;
	}

	::v-deep .avatar-uploader .el-upload {
		border: 1px dashed var(--el-border-color);
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
		transition: var(--el-transition-duration-fast);
	}

	::v-deep .avatar-uploader .el-upload:hover {
		border-color: var(--el-color-primary);
	}

	::v-deep .el-icon.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 178px;
		height: 178px;
		text-align: center;
	}
</style>